<template>
  <div class="search-container">
    <el-form class="search-form" :model="locationForm" label-width="110px" :inline="true" ref="ruleFormRef">
      <el-form-item label="查询图书">
        <el-input v-model="locationForm.book_id" placeholder="请输入图书编号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="submitSearchForm()">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div v-if="checkAuth()" class="search-container">
    <el-form class="search-form" :model="addLocationForm" label-width="110px" :inline="true" ref="ruleFormRef">
      <el-form-item label="添加图书位置">
        <el-input v-model="addLocationForm.book_id" placeholder="请输入图书编号" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="addLocationForm.shelf_number" placeholder="请输入区域编号" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="addLocationForm.aisle_number" placeholder="请输入走道编号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="submitAddForm()">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div v-if="checkAuth()" class="search-container">
    <el-form class="search-form" :model="changeLocationForm" label-width="110px" :inline="true" ref="ruleFormRef">
      <el-form-item label="修改图书位置">
        <el-input v-model="changeLocationForm.book_id" placeholder="请输入图书编号" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="changeLocationForm.shelf_number" placeholder="请输入区域编号" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="changeLocationForm.aisle_number" placeholder="请输入走道编号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="submitUpdateForm()">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    tips：区域编号格式为F+楼层+区域，走道编号为两位数字。<br>
    例如：《软件工程》图书编号为25，在三楼A区域的第4个走道，则区域编号为F3A，走道编号为04。
  </div>
</template>

<script setup lang='ts'>
import { reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import { getBookLocation, addBookLocation, changeBookLocation } from '@/request/api'
import { checkAuth } from '@/utils/index'


const locationForm = reactive({
  book_id: undefined,
  book_name: '',
  shelf_number: '',
  aisle_number: ''
})

const addLocationForm = reactive({
  book_id: undefined,
  shelf_number: '',
  aisle_number: ''
})

const changeLocationForm = reactive({
  book_id: undefined,
  shelf_number: '',
  aisle_number: ''
})


// 查询
const submitSearchForm = () => {
  getBookLocation({ book_id: locationForm.book_id }).then((res: any) => {
    // console.log(res);
    if (res.code === 200) {
      locationForm.book_id = res.data[0].book_id
      locationForm.book_name = res.data[0].book.title
      locationForm.shelf_number = res.data[0].shelf_number
      locationForm.aisle_number = res.data[0].aisle_number
      console.log(locationForm);
      const locationMes = `书名：${locationForm.book_name}<br>区域编号：${locationForm.shelf_number}<br>走道编号：${locationForm.aisle_number}`
      ElNotification({
        title: res.msg,
        dangerouslyUseHTMLString: true,
        message: locationMes,
        type: 'success',
        duration: 5000
      })
    } else {
      ElNotification({
        title: res.msg,
        type: 'error',
        duration: 1000
      })
    }

  }).catch((err) => {
    console.log(err);
  })
}

// 添加
const submitAddForm = () => {
  addBookLocation(addLocationForm).then((res: any) => {
    console.log(res);
    if (res.code === 200) {
      ElNotification({
        title: res.msg,
        type: 'success',
        duration: 1000
      })
    } else {
      ElNotification({
        title: res.msg,
        type: 'error',
        duration: 1000
      })
    }

  }).catch((err) => {
    console.log(err);
    ElNotification({
      title: '编号不能为空',
      type: 'error',
      duration: 1000
    })
  })
  addLocationForm.book_id = undefined
  addLocationForm.shelf_number = ''
  addLocationForm.aisle_number = ''
}

// 修改
const submitUpdateForm = () => {
  changeBookLocation(changeLocationForm).then((res: any) => {
    console.log(res);
    if (res.code === 200) {
      ElNotification({
        title: res.msg,
        type: 'success',
        duration: 1000
      })
    } else {
      ElNotification({
        title: res.msg,
        type: 'error',
        duration: 1000
      })
    }

  }).catch((err) => {
    console.log(err);
    ElNotification({
      title: '编号不能为空',
      type: 'error',
      duration: 1000
    })
  })
  changeLocationForm.book_id = undefined
  changeLocationForm.shelf_number = ''
  changeLocationForm.aisle_number = ''
}

</script>

<style scoped>
.search-container {
  border-bottom: 3px solid rgb(245, 245, 245);
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  align-items: center;
  height: 50px;
}

.table {
  border-top: 3px solid rgb(245, 245, 245);
}
</style>